{% extends './base.html' %}
{% block title %}随说列表{% endblock %}
{% block header %}
    <style>
        td.content {
            max-width: 400px !important;
            overflow: hidden;
        }
    </style>
{% endblock %}
{% block footer %}
    <script>
        $(function () {
            var talks_tbody = $('#talks-tbody')
            var pages_box = $('#page-box')
            var params = {
                page: 1,
                limit: 10,
            }
            getTalksApi()

            // 获取文章
            function getTalksApi() {
                lightyear.loading('show')
                $ajax.get({
                    url: '/v1/api/talks/',
                    data: params,
                    success: function (res) {
                        if (res.code === 200) {
                            talks_tbody.empty()
                            pages_box.empty()
                            var html = template('talk-item', {"talks": res.data})
                            talks_tbody.append(html)
                            pages_box.append(renderPage(res))
                        } else {
                            lightyear.notify("获取失败~~", 'danger', 1000)
                        }
                        lightyear.loading('hide')
                    }
                })
            }

            // 搜索
            $('#search-btn').click(function () {
                params['page'] = 1
                params['mood'] = $('select[name=mood]').val()
                getTalksApi()
            })
            // 点击页数
            $(document).on('click', '#page-box li', function () {
                var p = $(this).attr('data-page')
                if (p) {
                    params['page'] = p
                    getTalksApi()
                }
            })

        })

    </script>
{% endblock %}
{% block utils %}

    {% verbatim %}
    <script type="text/html" id="talk-item">
        {{ each talks talk }}
        <tr data-pid="{{ talk.id }}">
            <td class="id">{{ talk.id }}</td>
            <td class="mood">{{ talk.mood.name }}</td>
            <td class="content">{{ talk.content }}</td>
            <td class="pub-time">{{ talk.pub_time|timeSince }}</td>
            <td class="operation">
                <div class="btn-group">
                    <a class="btn btn-xs btn-default" href="#" title="删除"
                       data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                </div>
            </td>
        </tr>
        {{ /each }}
    </script>
    {% endverbatim %}
{% endblock %}
{% block main %}
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <form class="pull-right form-inline">
                        <div class="form-group">
                            <select class="form-control" name="mood">
                                <option value="0">请选择心情</option>
                                {% for mood in moods %}
                                    <option value="{{ mood.id }}">{{ mood.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary" id="search-btn">查询</button>
                        </div>
                    </form>
                    <div class="toolbar-btn-action">
                        <a class="btn btn-primary m-r-5" href="{% url 'cms:talks_add' %}"><i
                                class="mdi mdi-plus"></i> 新增</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-condensed table-hover">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>心情</th>
                                <th>内容</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="talks-tbody">

                            </tbody>
                        </table>
                    </div>
                    <ul class="pagination" id="page-box">

                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}